<template>
  <el-dialog
    :close-on-click-modal="false"
    :visible.sync="visible"
    width="50%">
    <div class="div2">
      <el-form :model="dataForm" :rules="dataRule" ref="dataForm" :show-message="false" label-width="150px">
          <H1>每日签到奖励设置</H1>
          <el-form-item label="周一：" prop="monday" v-model="dataForm.monday" >
            <div class="div1">
              <span v-show="false">{{dataForm.monday[0] = 1}}</span>
              <el-button class="el-button1" type="primary" size="mini">奖励</el-button>
              <el-input class="el-input1" v-model.trim="dataForm.monday[1]" placeholder="0" :disabled="this.count ===10 ? true : false" style="width: 60px;"></el-input>
              <el-button class="el-button1" type="primary" size="mini">积分</el-button>
            </div>
          </el-form-item>
        <el-form-item label="周二：" prop="tuesday" v-model="dataForm.tuesday">
          <div class="div1">
            <span v-show="false">{{dataForm.tuesday[0] = 2}}</span>
            <el-button class="el-button1" type="primary" size="mini">奖励</el-button>
            <el-input class="el-input1" v-model.trim="dataForm.tuesday[1]" placeholder="0" :disabled="this.count ===10 ? true : false" style="width: 60px"></el-input>
            <el-button class="el-button1" type="primary" size="mini">积分</el-button>
          </div>
        </el-form-item>
        <el-form-item label="周三：" prop="wednesday" v-model="dataForm.wednesday[1]">
          <div class="div1">
            <span v-show="false">{{dataForm.wednesday[0] = 3}}</span>
            <el-button class="el-button1" type="primary" size="mini">奖励</el-button>
            <el-input class="el-input1" v-model.trim="dataForm.wednesday[1]" placeholder="0" :disabled="this.count ===10 ? true : false" style="width: 60px"></el-input>
            <el-button class="el-button1" type="primary" size="mini">积分</el-button>
          </div>
        </el-form-item>
        <el-form-item label="周四：" prop="thursday" v-model="dataForm.thursday[1]">
          <div class="div1">
            <span v-show="false">{{dataForm.thursday[0] = 4}}</span>
            <el-button class="el-button1" type="primary" size="mini">奖励</el-button>
            <el-input class="el-input1" v-model.trim="dataForm.thursday[1]" placeholder="0" :disabled="this.count ===10 ? true : false" style="width: 60px"></el-input>
            <el-button class="el-button1" type="primary" size="mini">积分</el-button>
          </div>
        </el-form-item>
        <el-form-item label="周五：" prop="friday" v-model="dataForm.friday[1]">
          <div class="div1">
            <span v-show="false">{{dataForm.friday[0] = 5}}</span>
            <el-button class="el-button1" type="primary" size="mini">奖励</el-button>
            <el-input class="el-input1" v-model.trim="dataForm.friday[1]" placeholder="0" :disabled="this.count ===10 ? true : false" style="width: 60px"></el-input>
            <el-button class="el-button1" type="primary" size="mini">积分</el-button>
          </div>
        </el-form-item>
        <el-form-item label="周六：" prop="saturday" v-model="dataForm.saturday[1]">
          <div class="div1">
            <span v-show="false">{{dataForm.saturday[0] = 6}}</span>
            <el-button class="el-button1" type="primary" size="mini">奖励</el-button>
            <el-input class="el-input1" v-model.trim="dataForm.saturday[1]" placeholder="0" :disabled="this.count ===10 ? true : false" style="width: 60px"></el-input>
            <el-button class="el-button1" type="primary" size="mini">积分</el-button>
          </div>
        </el-form-item>
        <el-form-item label="周七：" prop="sunday" v-model="dataForm.sunday[1]">
          <div class="div1">
            <span v-show="false">{{dataForm.sunday[0] = 7}}</span>
            <el-button class="el-button1" type="primary" size="mini">奖励</el-button>
            <el-input class="el-input1" v-model.trim="dataForm.sunday[1]" placeholder="0" :disabled="this.count ===10 ? true : false" style="width: 60px"></el-input>
            <el-button class="el-button1" type="primary" size="mini">积分</el-button>
          </div>
        </el-form-item>
        <h2>累计签到奖励设置 （每周一重置累积次数）</h2>
        <el-form-item label="累计签到：" prop="sunday" v-model="dataForm.eight[1]">
          <div style="width: 66px; float: left">
            <select style="width: 60px" v-model="dataForm.eight[0] =3" :disabled="true">
              <option v-for="(item,index) in options" :value="item.value">
                {{item.label}}
              </option>
            </select>
          </div>
          <!--<el-input class="el-input1" v-model.trim="dataForm.eight[0] = 1" placeholder="1天"  disabled="true" style="float: left;width: 60px"></el-input>-->
          <div class="div1" style="margin-top: -8px;">
            <el-button class="el-button1" type="primary" size="small">奖励 </el-button>
            <el-input class="el-input1" v-model.trim="dataForm.eight[1]" placeholder="0"  :disabled="this.count ===10 ? true : false" style="width: 60px"></el-input>
            <el-button class="el-button1" type="primary" size="small">积分</el-button>
          </div>
        </el-form-item>
        <el-form-item label="累计签到：" prop="sunday" v-model="dataForm.nine[1]">
          <div style="width: 66px; float: left">
            <select style="width: 60px" v-model="dataForm.nine[0] =5" :disabled="true">
              <option v-for="(item,index) in options" :value="item.value">
                {{item.label}}
              </option>
            </select>
          </div>
          <!--<el-input class="el-input1" v-model.trim="dataForm.nine[0] = 4" placeholder="4天" disabled="true" style="float: left;width: 60px"></el-input>-->
          <div class="div1" style="margin-top: -8px;">
            <el-button class="el-button1" type="primary" size="small">奖励</el-button>
            <el-input class="el-input1" v-model.trim="dataForm.nine[1]" placeholder="0" :disabled="this.count ===10 ? true : false" style="width: 60px"></el-input>
            <el-button class="el-button1" type="primary" size="small">积分</el-button>
          </div>
        </el-form-item>
        <el-form-item label="累计签到：" prop="sunday" v-model="dataForm.ten[1]">
          <div style="width: 66px; float: left">
            <select style="width: 60px" v-model="dataForm.ten[0] = 7" :disabled="true">
              <option v-for="(item,index) in options" :value="item.value">
                {{item.label}}
              </option>
            </select>
          </div>
          <!--<el-input class="el-input1" v-model.trim="dataForm.ten[0] = 7" placeholder="7天" disabled="true" style="float: left;width: 60px"></el-input>-->
          <div class="div1" style="margin-top: -8px;">
            <el-button class="el-button1" type="primary" size="small">奖励</el-button>
            <el-input class="el-input1" v-model.trim="dataForm.ten[1]" placeholder="0" :disabled="this.count ===10 ? true : false" style="width: 60px"></el-input>
            <el-button class="el-button1" type="primary" size="small">积分</el-button>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="success" v-if="this.count != 10" :disabled="this.flag" @click="prohibitFormSubmit()">启用</el-button>
      <el-button type="warning" v-if="this.count === 10" :disabled="this.flag" @click="rebuildFormSubmit()">重设</el-button>
    </span>
  </el-dialog>
</template>

<script>
  export default {
    data () {
      var checkMonday = (rule, value, callback) => {
        debugger
        console.log(value.length)
        if (value.length === 1) {
          callback(this.$message.error('请输入积分'))
          return
        }
        let reg = /^[0-9]*[1-9][0-9]*$/
        if (!reg.test(value[1])) {
          callback(this.$message.error('积分应为正整数'))
        }
      }
      return {
        flag: false,
        count: 0,
        options: [
          {value: 1, label: '1天'},
          {value: 2, label: '2天'},
          {value: 3, label: '3天'},
          {value: 4, label: '4天'},
          {value: 5, label: '5天'},
          {value: 6, label: '6天'},
          {value: 7, label: '7天'}
        ],
        visible: false,
        dataForm: {
          monday: [],
          tuesday: [],
          wednesday: [],
          thursday: [],
          friday: [],
          saturday: [],
          sunday: [],
          eight: [],
          nine: [],
          ten: []
        },
        dataRule: {
          monday: [
            { validator: checkMonday, required: true, trigger: 'blur' }
          ],
          tuesday: [
            { validator: checkMonday, required: true, trigger: 'blur' }
          ],
          wednesday: [
            { validator: checkMonday, required: true, trigger: 'blur' }
          ],
          thursday: [
            { validator: checkMonday, required: true, trigger: 'blur' }
          ],
          friday: [
            { validator: checkMonday, required: true, trigger: 'blur' }
          ],
          saturday: [
            { validator: checkMonday, required: true, trigger: 'blur' }
          ],
          sunday: [
            { validator: checkMonday, required: true, trigger: 'blur' }
          ],
          eight: [
            { validator: checkMonday, required: true, trigger: 'blur' }
          ],
          nine: [
            { validator: checkMonday, required: true, trigger: 'blur' }
          ],
          ten: [
            { validator: checkMonday, required: true, trigger: 'blur' }
          ]
        }
      }
    },
    methods: {
      init () {
        this.visible = true
        this.getSigRewardList()
      },
      getSigRewardList () {
        this.$http({
          url: this.$http.adornUrl(`/reward/getSigRewardList`),
          method: 'get',
          params: this.$http.adornParams()
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.count = data.data.count
            for (var i = 0; i < data.data.list.length; i++) {
              if (data.data.list[i].rewardType !== 2 && data.data.list[i].rewardDay === this.dataForm.monday[0]) {
                this.dataForm.monday[1] = data.data.list[i].rewardContent
              } else if (data.data.list[i].rewardType !== 2 && data.data.list[i].rewardDay === this.dataForm.tuesday[0]) {
                this.dataForm.tuesday[1] = data.data.list[i].rewardContent
              } else if (data.data.list[i].rewardType !== 2 && data.data.list[i].rewardDay === this.dataForm.wednesday[0]) {
                this.dataForm.wednesday[1] = data.data.list[i].rewardContent
              } else if (data.data.list[i].rewardType !== 2 && data.data.list[i].rewardDay === this.dataForm.thursday[0]) {
                this.dataForm.thursday[1] = data.data.list[i].rewardContent
              } else if (data.data.list[i].rewardType !== 2 && data.data.list[i].rewardDay === this.dataForm.friday[0]) {
                this.dataForm.friday[1] = data.data.list[i].rewardContent
              } else if (data.data.list[i].rewardType !== 2 && data.data.list[i].rewardDay === this.dataForm.saturday[0]) {
                this.dataForm.saturday[1] = data.data.list[i].rewardContent
              } else if (data.data.list[i].rewardType !== 2 && data.data.list[i].rewardDay === this.dataForm.sunday[0]) {
                this.dataForm.sunday[1] = data.data.list[i].rewardContent
              } else if (data.data.list[i].rewardDay === this.dataForm.eight[0]) {
                this.dataForm.eight[1] = data.data.list[i].rewardContent
              } else if (data.data.list[i].rewardDay === this.dataForm.nine[0]) {
                this.dataForm.nine[1] = data.data.list[i].rewardContent
              } else if ((data.data.list[i].rewardDay === this.dataForm.ten[0])) {
                this.dataForm.ten[1] = data.data.list[i].rewardContent
              }
            }
          }
        })
        this.flag = false
      },
      // 启用操作
      prohibitFormSubmit () {
        this.flag = true
        if (this.dataForm.monday.length === 1) {
          this.dataForm.monday.push(0)
        }
        console.log(this.dataForm.monday[1])
        this.$confirm(`确定启用?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http({
            url: this.$http.adornUrl(`/reward/addSign`),
            method: 'post',
            data: this.$http.adornData({
              'monday': this.dataForm.monday.length === 1 ? this.dataForm.monday.push(0).toString() : this.dataForm.monday.toString(),
              'tuesday': this.dataForm.tuesday.length === 1 ? this.dataForm.tuesday.push(0).toString() : this.dataForm.tuesday.toString(),
              'wednesday': this.dataForm.wednesday.length === 1 ? this.dataForm.wednesday.push(0).toString() : this.dataForm.wednesday.toString(),
              'thursday': this.dataForm.thursday.length === 1 ? this.dataForm.thursday.push(0).toString() : this.dataForm.thursday.toString(),
              'friday': this.dataForm.friday.length === 1 ? this.dataForm.friday.push(0).toString() : this.dataForm.friday.toString(),
              'saturday': this.dataForm.saturday.length === 1 ? this.dataForm.saturday.push(0).toString() : this.dataForm.saturday.toString(),
              'sunday': this.dataForm.sunday.length === 1 ? this.dataForm.sunday.push(0).toString() : this.dataForm.sunday.toString(),
              'eight': this.dataForm.eight.length === 1 ? this.dataForm.eight.push(0).toString() : this.dataForm.eight.toString(),
              'nine': this.dataForm.nine.length === 1 ? this.dataForm.nine.push(0).toString() : this.dataForm.nine.toString(),
              'ten': this.dataForm.ten.length === 1 ? this.dataForm.ten.push(0).toString() : this.dataForm.ten.toString()
            })
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.getSigRewardList()
                }
              })
            } else if (data.code === 500) {
              debugger
              this.flag = false
              this.$message.error(data.msg = '请输入正确的积分')
            }
          })
        })
      },
      // 重设操作
      rebuildFormSubmit () {
        this.flag = true
        this.$confirm(`确定重设操作?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http({
            url: this.$http.adornUrl('/reward/removeRewardEnableState'),
            method: 'get',
            data: this.$http.adornData()
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.getSigRewardList()
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        })
      }
    }
  }
</script>
<style scoped>
  .el-input1 {
    width: 66px;
  }
  .div1 {
    margin-left: 150px;
    font-size: 36px;
    float: right;
    positon: relative;
  }
  .div2 {
    positon: absolute;
    width: 580px;
  }
  .el-button1 {
    width: 66px;
    background: #F56C6C;
  }
  h1 {
    margin-left: 20px;
    font-size: 26px;
  }
  h2 {
    margin-left: 18px;
    font-size: 16px;
  }
</style>
